<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.actived {
				color: red;
			}
			
			.red {
				background-color: yellow;
			}
		</style>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<!--class 的对象绑定-->
			<div :class="{actived:istrue,red:istrue}" @click="handelDivClick">我是测试样式1</div>

			<!--class数组的绑定-->
			<div :class="[active1,activeone]" @click="handelDivClick1">我是测试样式2</div>
			
			<div class="red">我是测试样式3</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					istrue: false,
					active1: "",
					activeone: "red",
					arrtest:["zsk","nrj"],
					objtest:{
						name:'nrj',
						age:28
					}
				},
				methods: {
					handelDivClick: function() {
						this.istrue = !this.istrue;
						console.log(this.objtest);
						// this.arrtest.$set();
						console.log(this.objtest);
						Vue.set(this.objtest,"sex","man")
					},
					handelDivClick1: function() {
						this.active1 = this.active1 === "" ? "red" : '';
					}
				}
			})
		</script>

	</body>

</html>